<template>
 <div >
    <sweet-modal ref="dialog" class="dialog">
          <h3>{{ title }}</h3>
            <div style=" height:300px; margin:30px 50px">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                      <el-input  v-model="roleData.ROLNAME"  placeholder="请输入角色名称"></el-input>
                    </div>
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-inline">
                      <el-input  v-model="roleData.ROLDESC"  placeholder="请输入角色描述"></el-input>
                    </div>
                  </div>
                </div>
                  <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">功能明细</label>
                      <div style=" float: left" v-show=" this.order != '新增' " >
                        <p style="font-size: 14px;  color: #d85450; margin-right: 20px ">
                            已开放权限
                        </p>
                        <el-tree :data="btnListIfonModify"
                            :props="defaultProps"
                            style="width: 220px; height: 200px; overflow: hidden; overflow-y: scroll; padding-left: 10px; margin-right: 20px">
                        </el-tree>
                    </div>
                    <div style=" float: left">
                        <p style="font-size: 14px;  color: #d85450;">
                            所有权限选项
                        </p>
                        <el-tree
                        :data="optionsData"
                        show-checkbox
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :default-checked-keys="$store.state.app.currentBtns"
                        :props="defaultProps"
                        @check-change="addRolBtnsPop"
                        style="width: 220px; height: 200px; overflow: hidden; overflow-y: scroll; padding-left: 10px; " >
                        </el-tree>
                    </div>
                  </div>
                </div>
            </div>

          <div class="layui-form-item btnCenter">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
          </div>
    </sweet-modal>
<!-- 详情 -->
         <sweet-modal ref="dialogInfo" class="dialog">
              <h3>{{ title }}</h3>
               <div style=" height:300px; margin:30px 50px">

                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-inline">
                          <el-input v-model="roleData.ROLNAME" readonly></el-input>
                        </div>

                        <label class="layui-form-label">角色描述</label>
                        <div class="layui-input-inline">
                          <el-input v-model="roleData.ROLDESC" readonly ></el-input>
                        </div>
                      </div>
                    </div>
                     <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">功能明细</label>
                         <div style=" float: left"  >
                            <p style="font-size: 14px;  color: #d85450; margin-right: 20px ">
                                已开放权限
                            </p>
                            <el-tree :data="btnListIfonModify"
                                :props="defaultProps"
                                style="width: 220px; height: 200px; overflow: hidden; overflow-y: scroll; padding-left: 10px; margin-right: 20px"
                            >
                            </el-tree>
                        </div>
                        <!-- <div style=" float: left" v-show=" this.order === '修改' || this.order === '新增' ">
                            <p style="font-size: 14px;  color: #d85450;">
                                所有权限选项
                            </p>
                            <el-tree
                            :data="optionsData"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            highlight-current
                            :default-checked-keys="$store.state.app.currentBtns"
                            :props="defaultProps"
                            @check-change="addRolBtnsPop"
                            style="width: 220px; height: 200px; overflow: hidden; overflow-y: scroll; padding-left: 10px; " >
                            </el-tree>
                        </div> -->
                      </div>
                    </div>
               </div>

              <div class="layui-form-item btnCenter">
                  <el-button @click="closeDialog">取消</el-button>
              </div>
         </sweet-modal>
 </div>
</template>

<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
const ADD = "新增";
const MODIFY = "修改";
const DELETE = "删除";
const INFO = "详情";
export default {
  data() {
    return {
      title: null,
      loading: false,
      type: null,
      optionsData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      btnListIfon: [],
      btnListIfonModify: [],
      currentBtns: [],
      currentListBtn: [],
      fups: [],
      addBtnItem: null,
      checked: false,
      order: null,
      roleData: {}
    };
  },
  methods: {
    //功能操作
    open(order, id) {
      this.order = order;
      this.dataRepeat();
      switch (this.order) {
        case ADD:
          this.title = "新增";
          this.initSelectData();
          this.$refs.dialog.open();
          break;
        case MODIFY:
          this.title = "修改";
          this.initSelectData();
          this.dataInfo(id);
          this.$refs.dialog.open();
          break;
        case INFO:
          this.title = "详情";
          this.dataInfo(id);
          this.$refs.dialogInfo.open();
          break;
        case DELETE:
          this.dataDelete(id);
          break;
        default:
      }
    },
    initSelectData() {
      this.getRoles();
    },
    //提交
    submit() {
      switch (this.order) {
        case ADD:
          this.dataAdd();
          break;
        case MODIFY:
          this.dataModify();
          break;
        case DELETE:
          break;
        case INFO:
          this.$refs.dialogInfo.close();
          break;
        default:
          break;
      }
    },
    //数据重置
    dataRepeat() {
      this.roleData = {};
    },

    refreshData() {
      this.$emit("refreshData");
    },

    //修改时添加权限
    addRolBtnsPop(key, checked, deep) {
      this.currentListBtn = this.$refs.tree
        .getCheckedNodes(true)
        .map(item => item.id);
    },
    roleFun(data) {
      const legendsData = data.map((item, i) => ({
        label: item.FGPVALUE,
        value: item.FGPID,
        children: item.Fups.map(item => ({
          id: item.FUPID,
          label: item.FUPVALUE,
          children: item.Funs.map(item => ({
            id: item.FUNID,
            label: item.FUNVALUE,
            children: item.Btns.map(item => ({
              id: item.BTNID,
              label: item.BTNVALUE
            }))
          }))
        }))
      }));
      this.btnListIfon = legendsData;
      this.btnListIfonModify = legendsData;
    },
    //删除表格列
    dataDelete(id) {
      //this.roleData.ROLID = this.currentRow.ROLID;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            ROLID: id
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().Role.Delete,
            res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.refreshData();
            },
            res => {
              this.$message.error(res.data.msg);
              //alert(res.data.msg)
              this.loading = false;
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //详情
    dataInfo(id) {
      //this.roleData.ROLID = this.currentRow.ROLID;
      let data = {
        ROLID: id
      };
      apiBase.DoService(data, apiBase.getApiAdress().Role.Detail, res => {
        this.roleData = res.data.content;
        // this.roleData.ROLID = this.currentRow.ROLID;

        let resultsData = res.data.content.Btns;
        this.roleFun(resultsData);

        this.btnListIfonModify.forEach((item, index) => {
          item.children.forEach((item, index) => {
            item.children.forEach((item, index) => {
              item.children.forEach((item, index) => {
                this.addBtnItem = item.id;
                this.$store.state.app.currentBtns.push(this.addBtnItem);
                this.currentBtns.push(this.addBtnItem);
                this.addRolBtnsPop(item.id);
              });
            });
          });
        });
        this.getRoles();
      });
    },
    //修改
    dataModify() {
      this.loading = true;
      let Data = JSON.parse(JSON.stringify(this.roleData));
      Data.List_Btns = this.currentListBtn;
      apiBase.DoService(
        Data,
        apiBase.getApiAdress().Role.Modify,
        res => {
          this.$refs.dialog.close();
          this.loading = false;
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          this.refreshData();
          // this.getRoles();
        },
        res => {
          this.$message.error(res.data.msg);
          //alert(res.data.msg)
          this.loading = false;
        }
      );
    },
    //角色权限
    getRoles() {
      var data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Role.QueryFunction,
        res => {
          let resultsData = res.data.content,
            legendsData = resultsData.map((item, i) => ({
              label: item.FGPVALUE,
              value: item.FGPID,
              children: item.Fups.map(item => ({
                id: item.FUPID,
                label: item.FUPVALUE,
                children: item.Funs.map(item => ({
                  id: item.FUNID,
                  label: item.FUNVALUE,
                  children: item.Btns.map(item => ({
                    id: item.BTNID,
                    label: item.BTNVALUE
                  }))
                }))
              }))
            }));
          this.optionsData = legendsData;
        }
      );
    },
    //新增提交
    dataAdd() {
      this.loading = true;
      let Data = JSON.parse(JSON.stringify(this.roleData));
      Data.List_Btns = this.currentListBtn;
      apiBase.DoService(
        Data,
        apiBase.getApiAdress().Role.Create,
        res => {
          this.loading = false;
          this.$refs.dialog.close();

          this.$message({
            type: "success",
            message: "新增成功!"
          });
          this.refreshData();
        },
        res => {
          this.$message.error(res.data.msg);
          //alert(res.data.msg)
          this.loading = false;
        }
      );
    },
    closeDialog() {
      if (this.order === ADD || this.order === MODIFY)
        this.$refs.dialog.close();
      else if (this.order === INFO) this.$refs.dialogInfo.close();
    }
  },
  components: {
    sweetModal
  }
};
</script>

<style>

</style>
